<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>手机端菜单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery.min.js"></script>
    <script src="js/mobile-menu.js"></script>
    <link rel="stylesheet" href="css/mobile-menu.css"/>
</head>
<body>

展开/收起菜单 <span onclick="$('.mobileMenu').toggle(300)" style="color: #00adb5"> 点我 </span>
<!-- 手机端菜单-->
<div class="mobileMenu">
    <li>
        <a href="javacript:void(0)">菜单1 </a>
        <img src="icon/el-icon-arrow-right.png" id="menu-icon-1" onclick="clickIconHandle(1)">
        <ul id="menu-1" hidden>
            <li>
            <li>
                <a href="javacript:void(0)">菜单1-1 </a>
                <img src="icon/el-icon-arrow-right.png" id="menu-icon-11" onclick="clickIconHandle(11)">
                <ul id="menu-11" hidden>
                    <li><a href="javacript:void(0)">菜单1-1-1 </a></li>
                    <li><a href="javacript:void(0)">菜单1-1-2 </a></li>
                    <li><a href="javacript:void(0)">菜单1-1-3 </a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="javacript:void(0)">菜单2 </a>
        <img src="icon/el-icon-arrow-right.png" id="menu-icon-2" onclick="clickIconHandle(2)">
        <ul id="menu-2" hidden>
            <li>
            <li>
                <a href="javacript:void(0)">菜单2-1 </a>
                <img src="icon/el-icon-arrow-right.png" id="menu-icon-21" onclick="clickIconHandle(21)">
                <ul id="menu-21" hidden>
                    <li><a href="javacript:void(0)">菜单2-1-1 </a></li>
                    <li><a href="javacript:void(0)">菜单2-1-2 </a></li>
                    <li><a href="javacript:void(0)">菜单2-1-3 </a></li>
                </ul>
            </li>
            <li>
                <a href="javacript:void(0)">菜单2-2 </a>
                <img src="icon/el-icon-arrow-right.png" id="menu-icon-22" onclick="clickIconHandle(22)">
                <ul id="menu-22" hidden>
                    <li><a href="javacript:void(0)">菜单2-2-1 </a></li>
                    <li><a href="javacript:void(0)">菜单2-2-2 </a></li>
                    <li><a href="javacript:void(0)">菜单2-2-3 </a></li>
                </ul>
            </li>
        </ul>
    </li>
</div>
</body>


<style>
    /*
     1、使用时请自行修正上间距
    /2、mobile-menu-animate

    */
    /* .mobile-menu {*/
    /*     margin-top: 15px;*/
    /* }*/
</style>
</html>